<template>
    <div class="playBox" :class="{playBox2:isPlayBox2}">
        <audio :src="song" id="audioBig" autoplay ></audio>
        <div class="headImg" @click="open_mu_page">
            <img :src="img" alt="">
        </div>
        <div class="infoma" @click="open_mu_page">
            <p class="song_name">{{song_name}}</p>
            <p class="name">{{artist_name}}</p>
        </div>
        <div class="btn">
            <p>
                <span @click="playBig">
                   <i v-if="!isPlay" class="iconfont icon-kaishi"></i>
                    <i v-else class="iconfont  icon-zanting"></i>
                </span>
                <span><i class="iconfont icon-xiayishou1" @click="nextSong"></i></span>
                <span><i class="iconfont icon-yinpingedan" @click="listOpen"></i></span>
            </p>
        </div>
    </div>
</template>
<script>
import jsonp from "jsonp";
export default {
  name: "smallPlay",
  data() {
    return {
      song: "",
      artist_name: "",
      song_name: "",
      img: "",
      num2: -1,
      songArr2: {},
      songArr3: {},
      songTimeing: ""
    };
  },
  computed: {
    //计算属性
    isPlayBox2() {
      //更改播放器位置
      return this.$store.state.isplayMap;
    },
    songArr() {
      //接收歌曲数组
      return this.$store.state.musicArr;
    },
    num() {
      return this.$store.state.musicArrIndex;
    },
    isPlay() {
      return this.$store.state.isplayicon;
    },
    isnext() {
      return this.$store.state.next_;
    },
    islast() {
      return this.$store.state.last;
    }
  },

  methods: {
    //创建方法
    playBig() {
      //暂停播放
      this.$store.commit("ageisplayicon", !this.isPlay);
    },
    listOpen() {
      //开启歌单
      this.$store.commit("listOpenDow", true);
    },
    open_mu_page() {
      //打开歌曲详细页面
      this.$store.commit("ageisOpen_mu_page", true);
    },
    nextSong() {
      //点击下一曲事件
      if (this.num2 !== this.songArr.length - 1) {
        this.num2++;
      } else {
        this.num2 = 0;
      }
      document.querySelector(".icon-xiayishou1").style.opacity = "0.5";
      setInterval(function() {
        document.querySelector(".icon-xiayishou1").style.opacity = "1";
      }, 200);
      this.$store.commit("ageisplayicon", true);
    },
    lastSong() {
      if (this.num2 !== -1) {
        this.num2--;
      } else {
        this.num2 = this.songArr.length - 1;
      }
      this.$store.commit("ageisplayicon", true);
    }
  },

  watch: {
    //监听
    num() {
      this.num2 = this.num;
    },
    num2() {
      if (
        this.songArr[this.num2].song_id &&
        this.songArr[this.num2].pic_premium
      ) {
        jsonp(
          "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.playAAC&songid=" +
            this.songArr[this.num2].song_id,
          null,
          (err, res) => {
            if (!err) {
              this.song = res.bitrate.show_link;
              this.artist_name = this.songArr[this.num2].author;
              this.song_name = this.songArr[this.num2].title;
              this.img = this.songArr[this.num2].pic_premium;
              // 发射数据给播放详细页面
              this.$store.commit("agesongArr", this.songArr[this.num2]);
              // 发射歌曲时间长度
              this.timer = setInterval(() => {
                this.$store.commit(
                  "agesongTime",
                  document.querySelector("#audioBig").duration
                );
              }, 1000);

              //发射歌曲进度时间
              this.timer = setInterval(() => {
                this.$store.commit(
                  "agesongTimging",
                  document.querySelector("#audioBig").currentTime
                );
              }, 1000);
            } else {
              console.log(err);
            }
          }
        );
      } else if (this.songArr[this.num2].songid) {
        jsonp(
          "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.playAAC&songid=" +
            this.songArr[this.num2].songid,
          null,
          (err, res) => {
            if (!err) {
              this.songArr2 = res;
              this.song = res.bitrate.show_link;
              this.artist_name = res.songinfo.artist;
              this.song_name = res.songinfo.title;
              this.img = res.songinfo.artist_1000_1000;
              // 发射数据给详情页
              this.$store.commit("agesongArr", this.songArr2);
              // 发射歌曲时间长度
              this.timer = setInterval(() => {
                this.$store.commit(
                  "agesongTime",
                  document.querySelector("#audioBig").duration
                );
              }, 1000);

              //发射歌曲进度时间
              this.timer = setInterval(() => {
                this.$store.commit(
                  "agesongTimging",
                  document.querySelector("#audioBig").currentTime
                );
              }, 1000);
            } else {
              console.log(err);
            }
          }
        );
      } else {
        jsonp(
          "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.playAAC&songid=" +
            this.songArr[this.num2].song_id,
          null,
          (err, res) => {
            if (!err) {
              this.songArr3 = res;
              this.song = res.bitrate.show_link;
              this.artist_name = res.songinfo.artist;
              this.song_name = res.songinfo.title;
              this.img = res.songinfo.artist_500_500;
              // 发射数据给详情页
              this.$store.commit("agesongArr", this.songArr3);
              // 发射歌曲时间长度
              this.timer = setInterval(() => {
                this.$store.commit(
                  "agesongTime",
                  document.querySelector("#audioBig").duration
                );
              }, 1000);

              //发射歌曲进度时间
              this.timer = setInterval(() => {
                this.$store.commit(
                  "agesongTimging",
                  document.querySelector("#audioBig").currentTime
                );
              }, 1000);
            } else {
              console.log(err);
            }
          }
        );
      }

      //自动播放下一曲
      let music = document.querySelector("audio");
      music.addEventListener("ended", () => {
        this.nextSong();
      });
    },
    isPlay() {
      if (this.song.length > 0) {
        if (this.isPlay) {
          document.querySelector("#audioBig").play();
        } else {
          document.querySelector("#audioBig").pause();
        }
      }
    },
    isnext() {
      this.nextSong();
    },
    islast() {
      this.lastSong();
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.playBox {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  border-top: 1px solid #f8f8f8;
  border-bottom: 2px solid #f8f8f8;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 10%;
  opacity: 0.98;
  z-index: 90;
  .headImg {
    float: left;
    width: 15%;
    height: 100%;
    overflow: hidden;
    border: none;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .infoma {
    width: 45%;
    height: 100%;
    float: left;
    padding: 0.35rem;
    box-sizing: border-box;
    .song_name {
      font-size: 12px;
      color: #000;
      overflow: hidden;
      white-space: nowrap; /*强制显示一行*/
      text-overflow: ellipsis; /*溢出文字省略号处理*/
      width: 130px;
    }
    .name {
      margin-top: 0.1rem;
      font-size: 10px;
      color: #999;
    }
  }
  .btn {
    width: 40%;
    height: 100%;
    float: right;
    color: #21c5bd;
    p {
      width: 100%;
      height: 100%;
      span {
        height: 100%;
        display: inline-block;
        width: 33.3%;
        text-align: center;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
.playBox2 {
  bottom: 0%;
}
</style>
